import React, { Component } from 'react';
// 三种修正this的方式
// 1 render函数中动态的绑定this
//  <button onClick={this.handleClick}>+</button>

// 2 构造函数修改this
// constructor(props){
//   super(props);
//   this.handleClick = this.handleClick.bind(this);
// }

// 3箭头函数
class App extends Component {
  constructor(props){
    super(props);
    // this.handleClick = this.handleClick.bind(this);
  }
  state= {
    msg:"牛"
  };

  // handleClick(){
  //   // 类函数定义this指向
  //   console.log(this);//undefined
  //   this.setState({
  //     msg:"羊"
  //   })
  // }
  handleClick = () => {
    this.setState({
      msg:"羊"
    })
  }
  render() {
    return (
      <div>
        {/* <button onClick={this.handleClick.bind(this)}>+</button> */}
        <button onClick={this.handleClick}>+</button>
      <h1>{this.state.msg}</h1>
      </div>
    );
  }
}

export default App;
